<template>
    <div class="pkIndexPage">
        <div class="indexBox">
            <div class="indexRandom" @click="pkRandom"></div>
            <div class="indexInvite" @click="pkInvite"></div>
            <div class="indexGuide" @click="showGuide">规则说明</div>
        </div>
        <!--放弃浮层-->
        <div id="modalGiveUp" aria-hidden="true" class="modal fade in" role="dialog">
            <div class="giveUpBox">
                <div class="body">
                    <h3>规则说明</h3>
                    <p style="text-align: justify;">
                        每次5道题，每道题限时15秒，1秒内答对，得15分，每延长1秒答对，得分相应降低1分，答题用时越长，得分越低，答错不得分。答完后根据总分判断胜负，获胜方获得5点能量值，失败方获得1点能量值。</p>
                    <div>
                        <!-- <span class="cancel" data-dismiss="modal">取 消</span> -->
                        <span class="ok" @click="hideGuide">确 定</span>
                    </div>
                </div>
                <div class="close" data-dismiss="modal"></div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: 'index',
    data() {
        return {
            uid: this.userHelper.getInfo('user_cert'),
        }
    },
    created: function () {
        this.wxShare();
    },
    methods: {
        onmessage(e) {
            console.log(e);
        },

        // 随机 PK
        pkRandom: function () {
            this.$emit('handle', {name: 'pkRandom'});
        },

        // 邀请 PK
        pkInvite: function () {
            this.$router.push({
                path: 'index',
                query: {
                    room: this.commonHelper.generateRoomID(),
                    roomOwner: this.uid,
                    time: (new Date).getTime(),
                }
            }).then(() => {
                this.$emit('handle', {name: 'pkInvite'});
            });
        },

        // 显示规则
        showGuide: function () {
            $("#modalGiveUp").modal({"backdrop": "static"});
        },

        // 隐藏规则
        hideGuide: function () {
            $("#modalGiveUp").modal('hide');
        },

        // 微信分享
        wxShare: function () {
            this.wxHelper.init({
                types: ['share'],
                callback: (status) => {
                    if (status) {
                        this.wxHelper.shareMessage({
                            title: '我正在参加“党史天天学”知识竞答双人对战，快来挑战我吧！', // 分享标题
                            desc: '', // '我正在参加“党史天天学”知识竞答双人对战，快来挑战我吧！', // 分享描述
                            link: appConfig.onLineApiDomain + '/index', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                            imgUrl: appConfig.onLineDomain + '/h5/img/wxShare.jpg', // 分享图标
                        });
                    }
                }
            });
        },
    },
}
</script>

<style lang="scss">
.needLogin {
    padding: 20px 0;

    .van-dialog__header {
        font-size: 18px;
        color: #333333;
        font-weight: normal;
    }

    .van-dialog__footer {
        &:after {
            border: none;
        }
    }

    .van-button__text {
        color: white;
        background: #02bb0d;
        padding: 6px 20px;
        border-radius: 4px;
    }
}

.indexGuide {
    height: 1rem;
    margin: 0 auto;
    position: absolute;
    top: 12rem;
    left: 2.8rem;
    font-size: 20px;
    color: aliceblue;
}
</style>
